

<template>
    <div class="chatboxtitle-main">
        <span class="chatboxtitle-item">张三</span>
        <span class="chatboxtitle-item"><el-icon><Briefcase /></el-icon></span>
        <span class="chatboxtitle-item"><el-icon><Message /></el-icon>zhangsan@tengxun.com</span>
        <span class="chatboxtitle-item"><el-icon><OfficeBuilding /></el-icon>市场部-事件分析组</span>
        <span class="chatboxtitle-item"><el-icon><Phone /></el-icon></span>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";

export default {
    name: "ChatBoxTitle",
    
    setup() {
        const state = reactive({

        });

        onMounted(() => {
        });



        return {
            ...toRefs(state)
        };
    },
};
</script>

<style lang="scss" scoped>

.chatboxtitle-main {
    display: flex;
    flex-direction: row;
    padding: 6px 16px;
    border-bottom: 1px solid #dee0e2;
    .chatboxtitle-item {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        margin-right: 6px;
        line-height: 32px;

        display: flex;
        align-items: center;
        justify-items: center;
    }
    .chatboxtitle-item:nth-child(1) {
        font-weight: bold;
        font-size: 18px;
    }
    .chatboxtitle-item:nth-child(2) {
        font-weight: bold;
        font-size: 18px;
        color: #22b2f0;
        line-height: 32px;
    }
    .chatboxtitle-item:nth-child(3), .chatboxtitle-item:nth-child(4) {
        font-size: 12px;
        color: #96999e;
        line-height: 32px;

        display: flex;
        flex-direction: row;

        .el-icon {
            font-size: 16px;
            margin: 10px 4px;
        }
    }
    .chatboxtitle-item:last-child {
        margin-left: auto;
    }
}

</style>
